<script setup lang="ts">
  import { RouterView } from 'vue-router';
  import { Card, Image } from '@arco-design/web-vue';
  import ColumnMenu from './components/ColumnMenu.vue';
  import Attention from '/@/components/Attention.vue';
</script>
<template>
  <div class="w-full">
    <div class="p-[12px] box-border">
      <div class="w-[calc(100%-80px)] flex relative mx-[40px]">
        <div class="left mr-[18px]">
          <a-affix :offsetTop="90">
            <ColumnMenu />
          </a-affix>
        </div>
        <div class="center flex-1 min-h-[calc(100vh-13rem-1240px)]">
          <RouterView />
        </div>
        <div class="rightt w-[266px] ml-[18px]">
          <Attention />

          <card class="ad-block mt-[10px]" hoverable :bordered="false">
            <template #cover>
              <div
                :style="{
                  height: '192px',
                  overflow: 'hidden',
                }"
              >
                <Image
                  width="100%"
                  height="100%"
                  fit="cover"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
              </div>
            </template>
          </card>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .title-div {
    height: 100px;
  }

  .header-card :deep(.arco-image-footer-caption-title) {
    font-weight: 700;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
